import React, { Component } from 'react'
import { Button, View,Text,Input } from '@tarojs/components'
import { AtList, AtListItem } from "taro-ui"
import {Current} from '@tarojs/taro'
import Taro from '@tarojs/taro'
import {api_updateOrderStatus} from '../../../utils/api'
import './pay.scss'

export default class pay extends Component {

  constructor(){
    super(...arguments)
    this.state={
      getting:false,
      password:'',
      focus:true,
      show:false
    }
  }

  componentWillMount(){
    this.setState({
      order_id:Current.router.params.order_id,
      doctor_name:Current.router.params.doctor_name,
      fee:Current.router.params.fee,
      hospital_name:Current.router.params.hospital_name,
      department:Current.router.params.department,
      getting:true
    })
  }

  handleClick =()=>{
    this.setState({
      show:true,
      password:'',
      focus:true,
    })
  }

  goNextPage = () =>{
    const params = {
      url: api_updateOrderStatus,
      data: {
        order_id:this.state.order_id,
        has_pay:1
      },
      method: 'POST',
      header: {'content-type': 'application/x-www-form-urlencoded'},
      success: (res) => {
        Taro.redirectTo({url: '/pages/pagesB/myOrder/myOrder'})
      },
      fail: (res) => {console.log(res.data)}
    }
    Taro.request(params)
  }

  hidePayLayer = () => {
    if (this.state.password == '123456') {
      Taro.showToast({
        title: '支付成功',
        icon: 'success'
      })
    setTimeout(this.goNextPage,1000)   
    }else{
      Taro.showToast({
        title: '密码错误！'
      })
      setTimeout(() =>{
        this.setState({
        password:''
      })},1000)
    }
  }

  inputPwd = (e) => {
    this.setState({
      password: e.detail.value
    })
    if (e.detail.value.length >= 6) {
          this.hidePayLayer()
    }
  }

  onHide = () =>{
    this.setState({
      show:false
    })
  }

  // 手机上不会出现焦点消失！
  render () {
    return (
      this.state.getting?
      <View className='checkOrderThings'>
        <AtList>
          <AtListItem note={'订单号：'+this.state.order_id}></AtListItem>
          <AtListItem note={'收款项：医疗服务'}></AtListItem>
          <View className='at-row'>
            <AtListItem note={'收款方：'+this.state.doctor_name} className='at-col'></AtListItem>
            <AtListItem title={'¥'+this.state.fee+'.00'} className='at-col at-col__offset-4'></AtListItem>
          </View>
        </AtList>
        <Button type='primary' circle onClick={this.handleClick} className='button'>去支付</Button>
        {this.state.show?
          <View className="dialog">
          <View className="input_main">
            <View className="input_title">
              <View className="input_back" onClick={this.onHide}><Text className="input_backtext"></Text></View>
              <Text>输入支付密码</Text>
            </View>
            <View className="input_row">
              {
                [0,1,2,3,4,5].map((item,index) => {
                  return (
                    <View key={index} className="pwd_item">
                      {this.state.password.length>index ? <Text className="pwd_itemtext"></Text> : null}
                    </View>
                )})
              }
            </View>
              <Input focus={this.state.focus} password type="number" maxLength="6" onInput={this.inputPwd} className="input_control" value={this.state.password} hold-keyboard></Input>
          </View>              
        </View>
        :null}
      </View>
      :<View></View>
    )
  }
}
